<template>
  <div class="right-block4">
    <div class="display-flex">
      <!--      <div class="box1">
        <div class="data-title">
          巡检数据
        </div>
      </div>-->
      <div class="box2 sm-title text-right">
        <span class="num">{{ normal }}</span>巡检次数 <span class="num color-red">{{ abnormal }}</span>发现问题
      </div>
    </div>
    <template v-if="dataList && dataList.length">
      <div class="patrol-list" @click="showView($event)">
        <vue-seamless-scroll
          :data="dataList"
          class="seamless-warp"
          :class-option="classOption"
        >
          <div
            v-for="(item, index) in dataList"
            :id="item.id"
            :key="index"
            class="item"
            style="cursor: pointer"
          >
            <div class="display-flex marginb-10">
              <div class="box2 title">
                <span
                  v-if="item.fileState === 1"
                  class="state state-error"
                /><span
                  v-if="item.fileState === 0"
                  class="state state-sucess"
                />{{ item.title }}
                <!--<el-tag>电流</el-tag> <el-tag type="danger">电压</el-tag>-->
              </div>
              <div class="box1 text-right">
                <el-avatar
                  :src="item.user.picture | imgPath"
                  icon="el-icon-user-solid"
                  :size="24"
                />
              </div>
            </div>
            <div class="display-flex">
              <div class="box3 desc">
                <template v-if="item.content">
                  {{ item.content }}
                </template>
                <template v-else>
                  <template v-if="item.fileType == 1">
                    <el-image
                      style="height: 40px; width: 40px"
                      :src="item.firstImage | imgPath"
                      fit="contain"
                    />
                  </template>
                  <template v-if="item.fileType == 2">
                    <el-image
                      style="height: 40px; width: 40px"
                      :src="item.videoPicture | imgPath"
                      fit="contain"
                    />
                  </template>
                  <template v-if="item.fileType == 3">
                    <audio :src="item.file | imgPath" />
                  </template>
                </template>

                <!--                {{ item.content }}-->
              </div>
              <div class="box1 text-right time">
                {{ item.ct | timeAgo }}
              </div>
            </div>
          </div>
          <!-- <div class="item">
                <div class="display-flex marginb-10">
                    <div class="box3 title">
                        <span class="state state-sucess"></span>恩科机电设备01号焊机
                    </div>
                    <div class="box1 text-right">
                        <el-avatar icon="el-icon-user-solid" :size="24"></el-avatar>
                    </div>
                </div>
                <div class="display-flex">
                    <div class="box3 desc">
                        一切正常。
                    </div>
                    <div class="box1 text-right time">
                        10分钟前
                    </div>
                </div>
            </div> -->
        </vue-seamless-scroll>
      </div>
    </template>
    <div v-else class="nodata">
      <img src="~@/assets/img/nobg.png">
      <div class="txt">暂无数据</div>
    </div>
    <el-dialog
      title="巡检详情"
      :visible.sync="dialogVisible1"
      width="530px"
      class="wise-modal"
    >
      <div v-if="dialogVisible1" class="wise-wrap">
        <div class="modal-wpline">
          <div class="modal-body">
            <div class="scroplist wise-detail">
              <div class="modal-header">
                <span class="txt">巡检详情</span>
              </div>
              <div class="detail-info">
                <el-form
                  label-width="120px"
                  class="wise-form"
                  label-suffix=":"
                  style="padding-top: 30px"
                >
                  <el-form-item label="标题">
                    {{ object.title }}
                  </el-form-item>
                  <el-form-item label="巡检描述">
                    {{ object.content }}
                  </el-form-item>
                  <el-form-item label="巡检时间">
                    {{ object.ct | dateFormat("YYYY-MM-DD HH:mm:ss") }}
                  </el-form-item>
                  <el-form-item label="巡检人">
                    <div v-if="object.user" style="display: inline-flex">
                      <el-avatar :src="object.user.picture | imgPath" />
                      <div style="margin-left: 20px">
                        {{ object.user.username }}
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
                <div class="base-info">
                  <template v-if="object.fileType === 1">
                    <el-row :gutter="20" style="padding-left: 20px">
                      <el-col
                        v-for="(item, index) in object.file.split(';')"
                        :key="index"
                        :span="4"
                      >
                        <el-image
                          style="height: 80px; width: 100%"
                          :src="item | imgPath"
                          fit="contain"
                          :preview-src-list="getSrcList(object.file)"
                        />
                      </el-col>
                    </el-row>
                  </template>
                  <template v-if="object.fileType === 2">
                    <video
                      width="100%"
                      height="220"
                      controls
                      style="padding-left: 20px"
                    >
                      <source :src="object.file | imgPath" type="video/mp4">
                      您的浏览器不支持 video 标签。
                    </video>
                  </template>
                  <template v-if="object.fileType === 3">
                    <audio :src="object.file | imgPath" controls />
                  </template>
                </div>
                <div class="text-center btn-show">
                  <el-button
                    type="primary"
                    style="display: block; margin: 0 auto"
                    @click="dialogVisible1 = false"
                  >关闭</el-button>
                </div>
                <div class="line3" />
                <div class="line4" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueSeamless from 'vue-seamless-scroll'
import { postHandle } from '@/api'
import AutoRefreshMixin from '../mixin/AutoRefreshMixin'
import { imgPath } from '@/filters'
export default {
  name: 'PatrolData',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    'vue-seamless-scroll': vueSeamless
  },
  mixins: [AutoRefreshMixin],
  props: {
    newSpaceId: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible1: false,
      object: {},
      normal: 0,
      abnormal: 0,
      dataList: [
        // { name: '01号焊机', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '02号焊机', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '03号焊机', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '挖掘机—01', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '吊车', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '发电机—01', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '发电机—02', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '中频加热器—01', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' },
        // { name: '中频加热器—01', picture: require('@/assets/img/t.jpg'), description: '一切正常。', status: 1, date: '2020-06-16 11:00:00' }
      ]
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    },
    classOption() {
      return {
        singleHeight: 100,
        direction: 1,
        limitMoveNum: 1
      }
    }
  },
  watch: {
    newSpaceId(v) {
      if (v) this.autoRefreshHandle()
    }
  },
  mounted() {
    this.autoRefreshHandle()
  },
  methods: {
    refreshHandle() {
      this.getData()
      this.patrolNormal()
      this.patrolAbnormal()
    },
    getSrcList(str) {
      let arr = []
      if (str) {
        arr = str.split(';')
      }
      return arr.map((item) => imgPath(item))
    },
    getData() {
      postHandle('/api/v1/welder-sbtx-second/file-management-comb/list', {
        d: {
          filters: [
            {
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.spaceId
            }
          ],
          page: {
            ps: 20
          },
          sorts: [{ field: 'time', isDesc: true }]
        }
      }).then((res) => {
        console.log(res.result)
        this.dataList = res.result
      })
    },
    patrolNormal() {
      postHandle('/api/v1/welder-sbtx-second/file-management/count', {
        d: {
          filters: [
            {
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            }
          ]
        }
      }).then((res) => {
        this.normal = res.result
      })
    },
    patrolAbnormal() {
      postHandle('/api/v1/welder-sbtx-second/file-management/count', {
        d: {
          filters: [
            {
              field: 'fileState',
              operator: 'EQUALS',
              value: 1
            },
            {
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            }
          ]
        }
      }).then((res) => {
        this.abnormal = res.result
      })
    },
    showView(event) {
      let id = this.getParentNode(event.target).id
      let item = this.dataList.find((item) => item.id === id)
      this.object = item
      this.dialogVisible1 = true
    },
    getParentNode(target) {
      if (target.className === 'item') {
        return target
      } else {
        return this.getParentNode(target.parentNode)
      }
    }
  }
}
</script>

<style scoped>
.seamless-warp {
  height: 280px;
  overflow: hidden;
}
</style>
